<template>
	<el-input placeholder="请选择" v-model="iconType" class="input-with-select" disabled>
		<svg-icon className="svg-icon-show" :iconClass="iconType" slot="prepend"></svg-icon>
		<el-popover slot="append" placement="bottom" trigger="hover">
			<el-row class="icon-list">
        <el-col :span="6" v-for="type in iconList" :key="type">
          <svg-icon className="cus-svg-icon" :iconClass="type" @click="iconClick(type)"></svg-icon>
        </el-col>
      </el-row>
      <el-button type="primary" slot="reference">选择</el-button>
		</el-popover>
	</el-input>
</template>

<script>
import SvgIcon from "../SvgIcon";
import {menuIconList} from '@/icons'

export default {
	components: { SvgIcon },
	props: ["value"],
	data() {
    this.iconList = menuIconList
		return {
			iconType: this.value,
			popVisible: false
		};
	},
	watch: {
		value(value) {
			if (value != this.iconType) {
				this.iconType = value;
			}
		}
	},
	methods: {
    iconClick(icon) {
      this.iconType = icon
      this.$emit('input', icon)
    }
  }
};
</script>

<style lang="scss" scoped>
.icon-list{
  width: 160px;
  max-height: 160px;
	overflow: auto;

	.svg-icon-show{
		font-size: 20px;	
	}

  .cus-svg-icon{
		font-size: 28px;
		fill: currentColor;
		cursor: pointer;

    &:hover{
      fill: #409EFF;
    }
  }
}
</style>